<template>
  <div>
    <van-nav-bar
        title="登录"
        left-text="返回"
        right-text="去注册"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />

    <van-tabs v-model="active">
      <van-tab title="账号密码">
        <div>
          <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="用户名或手机号"
                :rules="[{ required: true, message: '请填写用户名或手机号' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="padding: 5px;">
              <van-button round block type="info" native-type="submit">登录</van-button>
            </div>
          </van-form>
        </div>
      </van-tab>
      <van-tab title="短信登录">
        <div>
          <van-form @submit="onSubmit_phone">
            <van-field
                v-model="phone"
                name="phone"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
                v-model="sms"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button id="button" size="small" type="primary" @click="send_sms">{{ sms_interval }}</van-button>
              </template>
            </van-field>

            <div style="padding: 5px;">


              <van-button round type="info" block native-type="submit" @click="sms_login">登录
              </van-button>


              <!--    <van-button round block type="info" native-type="submit">{{ sms_interval }}</van-button>-->
            </div>
          </van-form>


        </div>
      </van-tab>
      <van-tab title="" disabled></van-tab>
      <van-tab title="" disabled></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      phone: '',
      sms: '',
      sms_interval: '获取验证码',
      is_send: false,
      active: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()

    },
    onClickRight() {
      this.$router.push('/register')
    },
    onSubmit(values) {
      this.$axios.post(`${this.$settings.base_url}user/login/mul_login/`, {
        username: values.username,
        password: values.password
      }).then(res => {
        if (res.data.code === 100) {
          // this.$cookies.set('username', res.data.username, '7d')
          // this.$cookies.set('token', res.data.token, "7d")
          // this.$cookies.set('icon', res.data.icon, '7d')
          // this.$cookies.set('id', res.data.id, '7d')
          localStorage.setItem('username', res.data.username)
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('icon', res.data.icon)
          localStorage.setItem('id', res.data.id,)

          Toast.success('登入成功');
          this.$router.push('/personal')
        } else {
          Toast.fail(res.data.msg);
        }
      })
    },
    onSubmit_phone(values) {

    },
    send_sms() {
      if (this.phone === '') {
        this.is_send = true
        Toast.fail('手机号不能为空');
      } else {
        this.is_send = false
      }
      if (this.is_send) return;
      this.is_send = false;
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
      this.$axios.get(`${this.$settings.base_url}user/sms/send_sms/?mobile=${this.phone}`).then(res => {
        console.log(res.data)
        if (res.data.code === 888) {
          this.sms_interval = "获取验证码";
          clearInterval(timer);
          Toast.fail(res.data.msg);
        }


      })
    },
    sms_login() {
      this.$axios.get(`${this.$settings.base_url}user/mobile/?mobile=${this.phone}`).then(res => {
        if (res.data.code === 100) {
          this.$axios.post(`${this.$settings.base_url}user/login/sms_login/`, {
            mobile: this.phone,
            code: this.sms
          }).then(res2 => {
            if (res2.data.code === 100) {
              // this.$cookies.set('username', res2.data.username, '7d')
              // this.$cookies.set('token', res2.data.token, "7d")
              // this.$cookies.set('icon', res2.data.icon, '7d')
              // this.$cookies.set('id', res2.data.id, '7d')
              localStorage.setItem('username', res2.data.username)
              localStorage.setItem('token', res2.data.token)
              localStorage.setItem('icon', res2.data.icon)
              localStorage.setItem('id', res2.data.id,)

              Toast.success('登入成功');
              this.$router.push('/personal')
            } else {
              Toast.fail(res2.data.msg);
              this.sms_interval = "获取验证码";
            }
          })
        } else {
          this.sms_interval = "获取验证码";
          Toast.fail(res.data.msg);

        }
      })
    }
  }
}
</script>

<style scoped>

</style>